<template>
	<view>
		<view v-for="(item,index) in news" style="margin: 10rpx;">
			<CustomTextView :nID="item.nID" :title="item.title" :isTop="item.isTop" :author="item.author"
				:comments="item.comments" :time="item.time" :mode="item.newstype"
				:image="item.imagelist"
				@click="onCustomViewClick(index)">
				<template v-slot:tips>
					<view class="slotcontent" v-if="item.showSearch">
						<text>搜索 : </text>
						<view class="borderbox"><text>巴以冲突</text></view>
					</view>
				</template>
			</CustomTextView>
		</view>
	</view>
</template>

<script>
	import data from "/data/news.json"
	import CustomTextView from "../../components/cardViewText.vue"
	export default {
		components: {
			CustomTextView
		},
		data() {
			return {
				news:[]
			}
		},
		onLoad(){
			this.news = data.datalist;
		},
		methods: {

		}
	}
</script>

<style>
	.slotcontent {
		display: flex;/* 让搜索和关键词在同一行 */
		align-items: center;/* 垂直居中对齐 */
		padding: 18rpx 10rpx;/* 上下内边距18rpx，左右20rpx*/
		border-radius: 12rpx;/*圆角*/
		margin-top: 5rpx;
	}
	.slotcontent text:first-child {
	  font-size: 26rpx;
	  color: #808080; 
	  margin-right: 12rpx; 
	}
	.borderbox {
	  padding: 5rpx 16rpx; 
	  border: 2rpx solid #e0e0e0;
	  border-radius: 8rpx;
	  background-color: #ffffff; 
	}
	.borderbox text {
	  font-size: 26rpx; 
	  color: #333333;
	}

</style>